<template>
  <div>
    <tab-bar>
      <template v-slot:tabbaritem>
        <!-- 首页 -->
        <tab-bar-item path="/home" activeColor="red">
            <template v-slot:item-icon>
              <img src="~assets/images/tabbar/home.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
              <img src="~assets/images/tabbar/home_active.svg" alt="">
            </template>
            <template v-slot:item-text>
               <span>首页</span>
            </template>
        </tab-bar-item>
        <!-- 分类 -->
        <tab-bar-item path="/category" activeColor="red">
            <template v-slot:item-icon>
              <img src="~assets/images/tabbar/category.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
              <img src="~assets/images/tabbar/category_active.svg" alt="">
            </template>
            <template v-slot:item-text>
               <span>分类</span>
            </template>
        </tab-bar-item>
        <!-- 购物车 -->
        <tab-bar-item path="/cart" activeColor="red">
            <template v-slot:item-icon>
              <img src="~assets/images/tabbar/cart.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
              <img src="~assets/images/tabbar/cart_active.svg" alt="">
            </template>
            <template v-slot:item-text>
               <span>购物车</span>
            </template>
        </tab-bar-item>
        <!-- 我的 -->
        <tab-bar-item path="/profile" activeColor="red">
            <template v-slot:item-icon>
              <img src="~assets/images/tabbar/profile.svg" alt="">
            </template>
            <template v-slot:item-icon-active>
              <img src="~assets/images/tabbar/profile_active.svg" alt="">
            </template>
            <template v-slot:item-text>
               <span>我的</span>
            </template>
        </tab-bar-item>
      </template>
    </tab-bar>
  </div>
</template>

  <script>
    import TabBar from 'components/common/tabbar/TabBar.vue'
    import TabBarItem from 'components/common/tabbar/TabBarItem.vue'

    export default {
      name: "MainTabBar",
      components: {
        TabBar, TabBarItem
      }
    }
  </script>

<style>

</style>
